<style scoped>
.time {
  font-size: 14px;
  font-weight: bold;
}

.content {
  padding-left: 5px;
}

.hisLine {
  margin: 0 20%;
}
</style>
<template>
  <Timeline class="hisLine  layout-content-body">
    <Timeline-item 
      v-for="item in watchHistory" 
      :key="item.Id"
    >
      <p class="time">{{ item.Ctime.slice(0,10) }}</p>
      <p class="content">{{ item.VideoName }}&nbsp;&nbsp;观看时长:{{ item.LookLong }}秒</p>
    </Timeline-item>
  </Timeline>
</template>

<script>
export default {
  data: function () {
    return {
      watchHistory: []
    };
  },
  mounted () {
    this.getall();
  },
  methods: {
    getall () {
      this.spinShow = true;
      this.$api.GetWatchHistory().then(res => {
        if (!res.error) {
          this.watchHistory = res.Data;
        } else {
          this.$Message.error(res.message);
        }
      });
    }
  }
};
</script>
